<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <div id="main" style="width: 800px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title: {
                text: '订单数',
                left: "5%",
                top: "8%",
                textStyle: {
                    color: '#111111', // 标题颜色
                    fontWeight: 'bold',
                    fontSize: 16,
                },
            },
            backgroundColor: '',
            grid: {
                top: "25%",
                bottom: "10%", //也可设置left和right设置距离来控制图表的大小
            },
            tooltip: {
                trigger: "axis",
                formatter: function (params) {
                    var relVal = params[0].name
                    for (var i = 0, l = params.length; i < l; i++) {
                        relVal += '<div style="display: flex;justify-content: space-between;">' +
                            '<div style="margin-top: 5px;margin-right: 40px;">' + params[i].marker + params[i].seriesName + '</div>'
                            + '<div style="margin-top: 5px;font-weight: bold;">' + params[i].value + '人' + '</div>'
                            + '</div>'
                    }
                    return relVal
                },
                axisPointer: {
                    type: "cross",
                    label: {
                        show: false
                    }
                }
            },
            legend: {
                data: ["比昨日", "上周同期", "上月同期"],
                top: "15%",

                //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    inside: true,
                    color: '#101010',
                    padding: [11, 0, 10, 0],
                    align: 'left',
                    verticalAlign: 'center',
                    fontSize: 14,
                    rich: {},
                },
            },
            xAxis: {
                name: '',
                data: ["11.07", "11.08", "11.09", "11.10", "11,11", "11.12", "11.13"],
                type: 'category',
                boundaryGap: true,
                nameTextStyle: {
                    color: '#fff',
                    padding: [0, 0, 6, 0]
                },
                axisTick: {
                    show: false,
                    inside: false,    // 控制小标记是否在grid里 
                    length: 5,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: '#333',
                        width: 1
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    }
                },
                axisLine: {
                    show: false,
                    symbol: ['none', 'arrow'],
                    symbolSize: [10, 15],
                    symbolOffset: [0, 0],
                    lineStyle: {
                        width: 2,
                        color: 'rgba(255,255,255,0.6)'
                    }
                },
                axisLabel: {
                    interval: 0,
                    rotate: 0,
                    // margin: 8,
                    textStyle: {
                        show: true,
                        color: '#101010',
                        fontSize: '12'
                    }
                }
            },
            yAxis: {
                name: "",
                type: "value",
                nameTextStyle: {
                    color: '#fff',
                    padding: [0, 0, 6, 0]
                },
                axisTick: {
                    show: false,
                    inside: false,    // 控制小标记是否在grid里 
                    length: 5,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: '#333',
                        width: 1
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#E8E8E8'
                    }
                },
                axisLine: {
                    show: false,
                    symbol: ['none', 'arrow'],
                    symbolSize: [10, 15],
                    symbolOffset: [0, 0],
                    lineStyle: {
                        width: 2,
                        color: 'rgba(255,255,255,0.6)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        show: true,
                        color: '#656565',
                        fontSize: '12'
                    }
                }
            },
            series: [
                {
                    name: "比昨日",
                    type: "bar",
                    label: {
                        show: true,
                        position: 'top',
                        color: '#656565',
                        fontWeight: 'bold',
                        fontSize: 14
                    },
                    barWidth: 20,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    color: new echarts.graphic.LinearGradient(
                        0, 1.2, 0, 0, // 渐变方向从上到下
                        [
                            { offset: 1, color: 'rgba(27, 136, 255, 1)' },   // 上部颜色
                            { offset: 0, color: 'rgba(27, 136, 255, 0)' }    // 下部颜色
                        ]
                    ),
                    data: [1010, 200, 346, 1010, 200, 346, 1010]
                },
                {
                    name: "上周同期",
                    type: "bar",
                    barWidth: 20,
                    label: {
                        show: true,
                        position: 'top',
                        color: "#656565",
                        fontSize: 14,
                        fontWeight: 'bold',
                    },
                    color: new echarts.graphic.LinearGradient(
                        0, 1.2, 0, 0, // 渐变方向从上到下
                        [
                            { offset: 1, color: 'rgba(250, 149, 80, 1)' },   // 上部颜色
                            { offset: 0, color: 'rgba(250, 149, 80, 0)' }    // 下部颜色
                        ]
                    ),
                    data: [189, 334, 289, 189, 334, 289, 189]
                },
                {
                    name: "上月同期",
                    type: "bar",
                    barWidth: 20,
                    label: {
                        show: true,
                        position: 'top',
                        color: "#656565",
                        fontSize: 14,
                        fontWeight: 'bold',
                    },
                    color: new echarts.graphic.LinearGradient(
                        0, 1.2, 0, 0, // 渐变方向从上到下
                        [
                            { offset: 1, color: 'rgba(77, 76, 76, 1)' },   // 上部颜色
                            { offset: 0, color: 'rgba(140, 136, 136, 0)' }    // 下部颜色
                        ]
                    ),
                    data: [542, 464, 690, 542, 464, 690, 542]
                }
            ]
        };


        myChart.setOption(option);

    </script>
</body>

</html>